<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :visible="visible"
    :width="375"
    @close="closeModal"
    :body-style="{
      height: 'calc(100% - 55px)',
      padding: 0,
      overflow: 'hidden',
    }"
  >
    <iframe
      :src="url"
      class="iframe"
      frameborder="no"
      border="0"
      marginWidth="0"
      marginHeight="0"
    ></iframe>
  </a-drawer>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "DetailIframe",
  props: {
    title: {
      type: String,
      default: "查看详情",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const closeModal = () => {
      emit("cancel");
    };
    return {
      closeModal,
    };
  },
});
</script>

<style scoped>
.iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
